<template>
  <div class="fortune-page">
    <!-- 页面标题 -->
    <h1 class="page-title">每日运势</h1>
    <!-- 运势类别 -->
    <div class="fortune-category">{{ fortuneCategory }}</div>
    <!-- 运势详情 -->
    <div class="fortune-detail">{{ fortuneDetail }}</div>
    <!-- 幸运颜色 -->
    <div class="lucky-color">幸运颜色：{{ luckyColor }}</div>
    <!-- 幸运数字 -->
    <div class="lucky-number">幸运数字：{{ luckyNumber }}</div>
    <!-- 运势建议 -->
    <div class="fortune-advice">{{ fortuneAdvice }}</div>
    <!-- 刷新按钮 -->
    <button @click="refreshFortune" class="refresh-btn">刷新运势</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 运势类别
const fortuneCategory = ref('');
// 运势详情
const fortuneDetail = ref('');
// 幸运颜色
const luckyColor = ref('');
// 幸运数字
const luckyNumber = ref('');
// 运势建议
const fortuneAdvice = ref('');

// 模拟运势数据
const fortuneData = [
  {
    category: '爱情运势',
    detail: '今天你在爱情方面可能会遇到一些小惊喜，与伴侣的关系更加甜蜜。',
    color: '粉色',
    number: '7',
    advice: '多与伴侣分享生活中的趣事，增进彼此感情。'
  },
  {
    category: '事业运势',
    detail: '工作上会有新的机遇出现，要积极主动去把握。',
    color: '蓝色',
    number: '3',
    advice: '制定详细的工作计划，提高工作效率。'
  },
  {
    category: '财运运势',
    detail: '财运平稳，可能会有一笔意外之财，但要注意合理规划。',
    color: '金色',
    number: '8',
    advice: '不要盲目投资，做好理财规划。'
  },
  {
    category: '健康运势',
    detail: '身体状况良好，但要注意休息，避免过度劳累。',
    color: '绿色',
    number: '1',
    advice: '适当进行运动，保持良好的作息。'
  }
];

// 刷新运势函数
const refreshFortune = () => {
  const randomIndex = Math.floor(Math.random() * fortuneData.length);
  const randomFortune = fortuneData[randomIndex];
  fortuneCategory.value = randomFortune.category;
  fortuneDetail.value = randomFortune.detail;
  luckyColor.value = randomFortune.color;
  luckyNumber.value = randomFortune.number;
  fortuneAdvice.value = randomFortune.advice;
};

// 页面加载时自动刷新一次运势
onMounted(() => {
  refreshFortune();
});
</script>

<style>
.fortune-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

.page-title {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.fortune-category {
  font-size: 24px;
  color: #666;
  margin-bottom: 10px;
}

.fortune-detail {
  font-size: 18px;
  color: #999;
  text-align: center;
  margin-bottom: 20px;
}

.lucky-color,
.lucky-number,
.fortune-advice {
  font-size: 16px;
  color: #999;
  margin-bottom: 10px;
}

.refresh-btn {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>